<template>
  <div class="page">
    <vs-row justify="center">
      <vs-col w="10">
        <div
          class="cardlist"
          v-infinite-scroll="init"
          infinite-scroll-disabled="busy"
          infinite-scroll-distance="10"
        >
          <vs-card
            type="2"
            v-for="card in list"
            @click="handleClick(card.product)"
            :key="card._id"
            class="thecard"
          >
            <template #title>
              <h3>{{ card.name }}</h3>
            </template>
            <template #img>
              <img :src="getImage(card)" alt="" />
            </template>
            <template #text>
              <p>作者：{{ card.username }}</p>
              <p>风格：{{ card.stylename }}</p>
              <p>{{ card.createdAt | parseTime("{y}-{m}-{d} {h}:{i}") }}</p>
              <p></p>
            </template>
            <template #interactions>
              <vs-button v-if="card.progress < 100" loading shadow
                >{{ card.progress }}%</vs-button
              >
              <vs-button
                v-else
                danger
                @click.stop.prevent="likeClick(card._id, card.user)"
              >
                <i class="bx bx-like"></i>
                <span class="like">{{ card.like }}</span>
              </vs-button>
              <vs-button
                class="btn-image"
                shadow
                @click.stop.prevent="getSource(card)"
              >
                <i class="bx bx-image"></i>
              </vs-button>
            </template>
          </vs-card>
        </div>
      </vs-col>
    </vs-row>
    <vs-dialog not-close auto-width not-padding v-model="active">
      <div class="con-image">
        <img :src="image" alt="" />
      </div>
    </vs-dialog>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { alltask, like } from "@/api/user";

export default {
  name: "list",
  data() {
    return {
      busy: false,
      page: 1,
      active: false,
      image: "",
      list: [],
      serverURL: process.env.VUE_APP_BASE_API + "/thumbnail/",
      imageURL: process.env.VUE_APP_BASE_API + "/images/",
      outputsURL: process.env.VUE_APP_BASE_API + "/outputs/",
      outputURL: process.env.VUE_APP_BASE_API + "/output/",
    };
  },
  computed: mapState(["user"]),
  methods: {
    // 发布任务
    async publishClick() {},
    async likeClick(id, user) {
      const res = await like({ id, user });
      if (res.data && res.data.status) {
        const task = this.list.find((e) => e._id === res.data.data.id);
        task.like = res.data.data.like;
        if (user === this.user) {
          this.$store.commit("like", res.data.data.userlike);
        }
      }
    },
    getSource(card) {
      this.image = this.imageURL + card.name;
      this.active = true;
    },
    getImage(card) {
      if (card.pass && card.progress >= 100) {
        return this.outputsURL + card.product;
      } else {
        return this.imageURL + card.name;
      }
    },
    handleClick(img) {
      // console.log(img);
      if (img) {
        this.image = this.outputURL + img;
        this.active = true;
      } else {
        this.openSuccessful("处理中，请等待", "每处理一张图大概需要3分钟");
      }
    },
    // 初始化方法，调用样式列表
    init: async function () {
      // console.log(this.page);
      this.busy = true;
      const res = await alltask(this.page);
      if (res.data.status) {
        if (res.data.data.length != 0) {
          // this.list = res.data.data;
          this.list = [...this.list, ...res.data.data];
          this.page++;
          this.busy = false;
        } else {
          this.openSuccessful("没有更多内容了");
        }
      }
      // console.log(this.list.length);
    },

    openSuccessful(title, c = "") {
      this.$vs.notification({
        progress: "auto",
        icon: "<i class='bx bx-select-multiple' ></i>",
        color: "success",
        position: "top-center",
        title: title,
        text: c,
      });
    },
    openNotification(title) {
      this.$vs.notification({
        progress: "auto",
        icon: "<i class='bx bxs-error' ></i>",
        color: "danger",
        position: "top-right",
        title: title,
      });
    },
  },
  mounted() {
    this.init();
  },
};
</script>

<style scoped lang="stylus">
.card{
  width : 100%;
}
.page {
  display: flex;
  align-items: center;
  min-height: 90vh;
  width: 100%;
  span {
    width: 100%;
  }
}
.thecard{
  width: 260px;
  padding: 20px 10px;
}
.cardlist {
  display: flex;
  flex-wrap: wrap;
  justify-content:space-around;
}
.like{
  margin-bottom: 2px;
}
/deep/ .vs-dialog--autoWidth{
  max-width: 80vw;
}
/deep/ .vs-dialog--autoWidth img{
  max-width: 80vw;
  border-radius: 20px;
}
/deep/ .bx-image:before {
    font-size:17px;
}
</style>
